<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/plantillas/plantilla-publica.xhtml">
    <f:metadata>
        <f:viewParam name="animal" 
                     value="#{contenidoBean.codigoAnimal}"/>
    </f:metadata>
    <ui:define name="cabecera">
        <title>
            <h:outputText value="Fauna de El Salvador - 
                          #{contenidoBean.animal.nombrecientifico}"/>
        </title>
        <script src="http://maps.google.com/maps/api/js?sensor=true" 
        type="text/javascript"></script>
    </ui:define>
    <ui:define name="contenido">
        <center>
            <p:panel id="animalPnl" 
                    style="font-size: 120%; text-align: center; width:80%; min-width:800px !important;"
                    header="#{contenidoBean.animal.nombrecientifico}">
                <div id="cuerpo">          
                    <div id="izquierda">
                        <p:panelGrid style="width: 100%; font-size: 100%">
                            <f:facet name="header">
                                <p:row>  
                                    <p:column>
                                        Reseña
                                    </p:column>
                                </p:row>
                            </f:facet>
                            <p:row> 
                                <p:column style="text-align: justify">
                                    <h:outputText 
                                        value="#{contenidoBean.resenya.contenidoactual}" 
                                        escape="false"/>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </div>
                    <div id="derecha">
                        <p:panelGrid style="width: 100%; font-size: 100%">
                            <f:facet name="header">
                                <p:row>  
                                  <p:column colspan="3">
                                        Nombre científico
                                  </p:column>
                                </p:row>
                            </f:facet>
                            <p:row>  
                                <p:column colspan="3">
                                    <h:outputText 
                                        value="#{contenidoBean.animal.nombrecientifico}"/>
                                </p:column>   
                            </p:row>
                            <p:row>  
                                <p:column colspan="3" 
                                        styleClass="ui-widget-header" 
                                        style="text-align: center">  
                                    <h:outputText value="Nombre común" /> 
                                </p:column>  
                            </p:row> 
                            <p:row>  
                                <p:column colspan="3">
                                    <h:outputText 
                                        value="#{contenidoBean.animal.nombrecomun}"/>
                                </p:column>  
                            </p:row>
                            <p:row>  
                                <p:column colspan="3" 
                                        styleClass="ui-widget-header" 
                                        style="text-align: center">  
                                    <h:outputText value="Sinonimia(s)" /> 
                                </p:column>  
                            </p:row> 
                            <p:row>  
                                <p:column colspan="3">
                                    <h:outputText value="#{contenidoBean.getSinonimias()}"/>
                                </p:column>
                            </p:row> 
                             <p:row >  
                                <p:column 
                                        styleClass="ui-widget-header" 
                                        style="text-align: center">  
                                    <h:outputText value="Galería" /> 
                                </p:column>
                                 <p:column 
                                        styleClass="ui-widget-header" 
                                        style="text-align: center">  
                                    <h:outputText value="Ubicación" /> 
                                </p:column> 
                                 <p:column 
                                        styleClass="ui-widget-header" 
                                        style="text-align: center">  
                                    <h:outputText value="Especímenes" /> 
                                </p:column> 
                            </p:row> 
                            <p:row>
                                <p:column>
                                    <center>
                                        <p:commandButton 
                                            title="Fotos del animal" 
                                            onclick="galeriaAnimal.show()"
                                            type="button"
                                            icon="ui-icon-image"/>
                                    </center>
                                </p:column>
                                <p:column>
                                    <center>
                                        <p:commandButton 
                                            title="Ubicaciones del animal" 
                                            onclick="mapaAnimal.show()"
                                            type="button"
                                            icon="ui-icon-home"/>
                                    </center>
                                </p:column>
                                <p:column>
                                    <center>
                                        <p:commandButton 
                                            title="Listado de especímenes" 
                                            onclick="especimenAnimal.show()"
                                            type="button"
                                            icon="ui-icon-search"/>
                                    </center>
                                </p:column>
                            </p:row>    
                        </p:panelGrid>
                        <p:panelGrid style="width: 100%; font-size: 100%">
                            <f:facet name="header">
                                <p:row>  
                                    <p:column colspan="2">
                                        Clasificación científica
                                    </p:column>
                                </p:row>
                            </f:facet>
                            <p:row> 
                                <p:column>
                                    Phylum
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.phylum}"/>
                                </p:column>             
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Clase
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.clase}"/>
                                </p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Sub-clase
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.subclase}" />
                                </p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Infra-clase
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.infraclase}"/>
                                </p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Orden
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.orden}"/>
                                </p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Sub-orden
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.suborden}"/>
                                </p:column> 
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Super-familia
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.superfamilia}"/>
                                </p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Familia
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.familia}"/>
                                </p:column>  
                            </p:row>               
                            <p:row>  
                                <p:column>
                                    Sub-familia
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.subfamilia}"/>
                                </p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Tribu
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.tribu}"/>
                                </p:column>
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Género
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.genero}"/>
                                </p:column>
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Especie
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.especie.nombre}"/>
                                </p:column> 
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Sub-especie
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.subespecie}"/>
                                </p:column>  
                            </p:row>
                            <p:row>  
                                <p:column>
                                    Variedad
                                </p:column> 
                                <p:column>
                                    <h:outputText 
                                        value="#{contenidoBean.animal.variedad}"/>
                                </p:column>  
                            </p:row>
                        </p:panelGrid>
                    </div>           
                </div>
                <div class="clear">
                </div>
            </p:panel>
        </center>
    </ui:define>
    <ui:define name="extra">
        <p:dialog id="galeriaDlg" 
                  header="Galería de Imágenes de
                  #{contenidoBean.animal.nombrecientifico}" 
                  widgetVar="galeriaAnimal" 
                  resizable="false" 
                  modal="true"
                  draggable="false"
                  closable="false"
                  style="font-size: 95%">
            <p:galleria 
                value="#{contenidoBean.listaEspecimenes}"
                var="imagen" 
                effectSpeed="1000"
                panelWidth="600"
                panelHeight="400">
                <p:graphicImage 
                    value="/fotos/#{imagen.fotografia}"/>
            </p:galleria>
            <p:commandButton 
                    value="Cerrar" 
                    type="button" 
                    onclick="galeriaAnimal.hide()"
                    icon="ui-icon-close" 
                    title="Cerrar ventana"
                    immediate="true"
                    style="float:right; font-size: 85%"/>
        </p:dialog>
        <p:dialog id="mapaDlg" 
                  header="Ubicación de Especímenes de
                  #{contenidoBean.animal.nombrecientifico}" 
                  widgetVar="mapaAnimal" 
                  resizable="false" 
                  modal="true"
                  draggable="false"
                  closable="false"
                  style="font-size: 95%">
            <p:gmap center="13.577012, -89.186539" 
                    zoom="8"  
                    type="HYBRID"
                    model="#{contenidoBean.coordenadasMapa()}"
                    style="width:640px; height:480px">
                <p:ajax event="overlaySelect" 
                        listener="#{contenidoBean.seleccionarMarcador}" /> 
                <p:gmapInfoWindow>
                    <p:outputPanel 
                        style="text-align:center;display:block;margin:auto:">
                        
                        <p:graphicImage height="100"
                                        value="/fotos/#{contenidoBean.marcador.data}.jpg"/>
                            
                        <br/>
                        <h:outputText 
                            value="Especímen de #{contenidoBean.animal.nombrecientifico}
                            recolectado en el municipio de #{contenidoBean.marcador.title}" /> 
                        
                    </p:outputPanel>
                </p:gmapInfoWindow>
            </p:gmap>
            <p:commandButton 
                    value="Cerrar" 
                    type="button" 
                    onclick="mapaAnimal.hide()"
                    icon="ui-icon-close" 
                    title="Cerrar ventana"
                    immediate="true"
                    style="float:right; font-size: 85%"/>
        </p:dialog>
        <p:dialog id="especimenDlg" 
                  header="Especímenes de 
                  #{contenidoBean.animal.nombrecientifico}" 
                  widgetVar="especimenAnimal" 
                  resizable="false" 
                  modal="true"
                  draggable="false"
                  closable="false"
                  style="font-size: 95%">
            <h:form id="especimenFrm">      
                <p:dataTable 
                    id="especimenTbl"
                    var="especimen"
                    rows="10"
                    selectionMode="single"
                    paginator="true"
                    paginatorPosition="bottom"
                    value="#{contenidoBean.listaEspecimenes}"
                    rowKey="#{especimen.codigoespecimen}"
                    style="text-align: center"
                    emptyMessage="No hay registros disponibles.">
                    <p:column 
                        headerText="Código"
                        filterBy="#{especimen.codigoespecimen}" 
                        sortBy="#{especimen.codigoespecimen}" 
                        filterMatchMode="contains"
                        style="font-size: 110%">
                        <h:outputText 
                            value="#{especimen.codigoespecimen}"/> 
                    </p:column>
                    <p:column 
                        headerText="Fecha Recolección"
                        filterBy="#{especimen.recoleccion.fecharecoleccion}" 
                        sortBy="#{especimen.recoleccion.fecharecoleccion}" 
                        filterMatchMode="contains"
                        style="font-size: 110%">
                        <h:outputText 
                            value="#{especimen.recoleccion.fecharecoleccion}">
                                <f:convertDateTime 
                                    pattern="dd/MM/yyyy"/>
                        </h:outputText> 
                    </p:column>
                    <p:column 
                        headerText="Determinó"
                        filterBy="#{especimen.determino}" 
                        sortBy="#{especimen.determino}" 
                        filterMatchMode="contains"
                        style="font-size: 110%">
                        <h:outputText 
                            value="#{especimen.determino}"/>
                    </p:column>
                    <p:column 
                        headerText="Confirmó"
                        filterBy="#{especimen.confirmo}" 
                        sortBy="#{especimen.confirmo}" 
                        filterMatchMode="contains"
                        style="font-size: 110%">
                        <h:outputText 
                            value="#{especimen.confirmo}"/>
                    </p:column>
                                     
                    <p:column 
                        headerText="Conservación"
                        filterBy="#{especimen.tipoconservacion}" 
                        sortBy="#{especimen.tipoconservacion}" 
                        filterMatchMode="contains"
                        style="font-size: 110%">
                        <h:outputText 
                            value="#{especimen.tipoconservacion}"/>
                    </p:column>
                    <p:column 
                        headerText="Fotografía"
                        style="font-size: 110%">
                        <center>
                             <p:commandButton 
                                 id="fotografiaBtn"  
                                 icon="ui-icon-image"
                                 type="button"
                                 title="Ver fotografía"/>
                        </center>
                        <p:overlayPanel 
                            id="fotografiaPnl" 
                            for="fotografiaBtn" 
                            appendToBody="true" 
                            showEvent="mouseup"
                            hideEvent="mouseup" 
                            hideEffect="fade" 
                            dynamic="true">
                            <p:dataTable 
                                id="fotografiaTbl" 
                                var="fotografia"  
                                value=""
                                rows="1"
                                style="text-align: center; 
                                       font-size: 110%">
                                <p:column 
                                    headerText="Fotografía de Espécimen de 
                                    #{contenidoBean.animal.nombrecientifico}">
                                    <p:graphicImage 
                                        url="/fotos/#{especimen.fotografia}"
                                        width="320"
                                        height="240"/>
                                </p:column>
                            </p:dataTable>
                        </p:overlayPanel>
                    </p:column>
                    <p:column 
                        headerText="Rasgos Físicos"
                        style="font-size: 110%">
                        <center>
                             <p:commandButton 
                                 id="fisicoBtn"  
                                 icon="ui-icon-search"
                                 title="Ver rasgos físicos"
                                 type="button" />
                        </center>
                         <p:overlayPanel 
                             id="fisicoPnl" 
                             for="fisicoBtn" 
                             appendToBody="true" 
                             showEvent="mouseup"
                             hideEvent="mouseup" 
                             hideEffect="fade" 
                             dynamic="true">
                             <p:dataTable 
                                 id="fisicoTbl" 
                                 var="fisico"  
                                 value=""
                                 rows="1"
                                 style="text-align: center; 
                                        font-size: 110%">
                                 <p:column headerText="Sexo">
                                     <h:outputText 
                                         value="#{especimen.sexo == 'M' 
                                        or especimen.sexo == 'm' 
                                        ? 'Masculino' : 
                                        especimen.sexo == 'F' 
                                        or especimen.sexo == 'f' 
                                        ? 'Femenino' : 
                                        'Hemafrodita'}" /> 
                                 </p:column>
                                 <p:column headerText="Madurez">
                                     <h:outputText 
                                         value="#{especimen.madurez}"/> 
                                 </p:column>
                                 <p:column headerText="Peso (gr.)">     
                                    <h:outputText 
                                        value="#{especimen.peso}"/>          
                                 </p:column>
                                 <p:column headerText="Longitud (mt.)">
                                     <h:outputText 
                                         value="#{especimen.longitud}"/>
                                 </p:column>
                                 <p:column headerText="Diametro (mt.)">
                                     <h:outputText 
                                         value="#{especimen.diametro}"/>
                                 </p:column>
                                 <p:column headerText="Altura (mt.)">
                                     <h:outputText 
                                         value="#{especimen.altura}"/>
                                 </p:column>
                                 <p:column headerText="Textura">
                                     <h:outputText 
                                         value="#{especimen.textura}"/>
                                 </p:column>
                                 <p:column headerText="Coloración">
                                     <h:outputText 
                                         value="#{especimen.coloracion}"/>
                                 </p:column>
                             </p:dataTable> 
                         </p:overlayPanel>
                    </p:column>
                    <p:column headerText="Detalle"
                              style="font-size: 110%">
                        <center>
                             <p:commandButton 
                                 id="detalleBtn"  
                                 icon="ui-icon-search"
                                 title="Ver detalles" 
                                 type="button" />
                        </center>
                        <p:overlayPanel 
                            id="detallePnl" 
                            for="detalleBtn" 
                            appendToBody="true" 
                            showEvent="mouseup"
                            hideEvent="mouseup" 
                            hideEffect="fade" 
                            dynamic="true">
                            <p:dataTable 
                                id="detalleTbl" 
                                var="detalle"  
                                value=""
                                rows="1"
                                style="text-align: center; 
                                       font-size: 110%">
                                <p:column 
                                    headerText="Habitát">
                                    <h:outputText 
                                        value="#{especimen.habitat}"/>
                                </p:column>
                                <p:column 
                                    headerText="Tipo Sustrato">
                                    <h:outputText 
                                        value="#{especimen.tiposustrato}"/>
                                </p:column>
                                <p:column 
                                    headerText="Altitud (mt.)"
                                    rendered="#{especimen.tipoespecimen == 'T' or
                                                especimen.tipoespecimen == 't'}">
                                    <h:outputText 
                                        value="#{contenidoBean.castTerrestre(especimen).altitud}"/>
                                </p:column>
                                <p:column 
                                    headerText="Hospedero"
                                    rendered="#{especimen.tipoespecimen == 'T' or
                                                especimen.tipoespecimen == 't'}">
                                    <h:outputText 
                                        value="#{contenidoBean.castTerrestre(especimen).hospedero}"/>
                                </p:column>
                                <p:column 
                                    headerText="Profundidad (mt.)"
                                    rendered="#{especimen.tipoespecimen == 'A' or
                                                especimen.tipoespecimen == 'a'}">
                                    <h:outputText 
                                        value="#{contenidoBean.castAcuatico(especimen).profundidad}"/>
                                </p:column>
                                <p:column 
                                    headerText="Salinidad (PSU)"
                                    rendered="#{especimen.tipoespecimen == 'A' or
                                                especimen.tipoespecimen == 'a'}">
                                    <h:outputText 
                                        value="#{contenidoBean.castAcuatico(especimen).salinidad}"/>
                                </p:column>
                                <p:column 
                                    headerText="PH"
                                    rendered="#{especimen.tipoespecimen == 'A' or
                                                especimen.tipoespecimen == 'a'}">
                                    <h:outputText 
                                        value="#{contenidoBean.castAcuatico(especimen).ph}"/>
                                </p:column>
                                <p:column 
                                    headerText="Condición Marea"
                                    rendered="#{especimen.tipoespecimen == 'A' or
                                                especimen.tipoespecimen == 'a'}">
                                    <h:outputText 
                                        value="#{contenidoBean.castAcuatico(especimen).condicionmarea}"/>
                                </p:column>
                                <p:column 
                                    headerText="Hospedero"
                                    rendered="#{especimen.tipoespecimen == 'A' or
                                                especimen.tipoespecimen == 'a'}">
                                    <h:outputText 
                                        value="#{contenidoBean.castAcuatico(especimen).hospedero}"/>
                                </p:column>
                            </p:dataTable>
                        </p:overlayPanel>
                    </p:column>
                    <p:column headerText="Descripción"
                              style="font-size: 110%">
                        <center>
                             <p:commandButton 
                                 id="descripcionBtn"  
                                 icon="ui-icon-search"
                                 title="Ver descripciones"
                                 type="button" />
                        </center>
                        <p:overlayPanel 
                            id="descripcionPnl" 
                            for="descripcionBtn" 
                            appendToBody="true" 
                            showEvent="mouseup"
                            hideEvent="mouseup" 
                            hideEffect="fade" 
                            dynamic="true">
                            <p:dataTable 
                                id="descripcionTbl" 
                                var="descripcion"  
                                value=""
                                rows="1"
                                style="text-align: center; 
                                       font-size: 110%">
                                <p:column headerText="Estado Muestra">
                                    <h:outputText 
                                        value="#{especimen.estadomuestra}"/>
                                </p:column>
                                <p:column headerText="Estatus Local">
                                    <h:outputText 
                                        value="#{especimen.estatuslocal}"/>
                                </p:column>
                                <p:column headerText="Descripción Taxonómica">
                                    <h:outputText 
                                        value="#{especimen.descripciontaxonomica}"/>
                                </p:column>
                                <p:column headerText="Observaciones">
                                    <h:outputText 
                                        value="#{especimen.observaciones}"/>
                                </p:column> 
                            </p:dataTable>
                        </p:overlayPanel>
                    </p:column>
                    <p:column headerText="Recolección"
                              style="font-size: 110%">
                        <center>
                             <p:commandButton 
                                 id="recoleccionBtn"  
                                 icon="ui-icon-search"
                                 title="Ver datos de recolección" 
                                 type="button" />
                        </center>
                        <p:overlayPanel 
                            id="recoleccionPnl" 
                            for="recoleccionBtn" 
                            appendToBody="true" 
                            showEvent="mouseup"
                            hideEvent="mouseup" 
                            hideEffect="fade" 
                            dynamic="true">
                            <p:dataTable 
                                id="recoleccionTbl" 
                                var="recoleccion"  
                                value=""
                                rows="1"
                                style="text-align: center; 
                                       font-size: 110%">
                                <p:column headerText="Tipo Recolección">
                                    <h:outputText 
                                        value="#{especimen.recoleccion.tiporecoleccion == 'I' or
                                        especimen.recoleccion.tiporecoleccion == 'i'
                                        ? 'Internacional' : 'Nacional'}"/>
                                </p:column>
                                <p:column 
                                    headerText="Municipio"
                                    rendered="#{especimen.recoleccion.tiporecoleccion == 'N' or
                                                especimen.recoleccion.tiporecoleccion == 'n'}">
                                    <h:outputText 
                                        value="#{contenidoBean.coordenadasEspecimen(especimen.codigoespecimen).nombre}"/>
                                </p:column>
                                <p:column 
                                    headerText="Latitud"
                                    rendered="#{especimen.recoleccion.tiporecoleccion == 'N' or
                                                especimen.recoleccion.tiporecoleccion == 'n'}">
                                    <h:outputText 
                                        value="#{contenidoBean.coordenadasEspecimen(especimen.codigoespecimen).latitud}"/>
                                </p:column>
                                <p:column 
                                    headerText="Longitud"
                                    rendered="#{especimen.recoleccion.tiporecoleccion == 'N' or
                                                especimen.recoleccion.tiporecoleccion == 'n'}">
                                    <h:outputText 
                                        value="#{contenidoBean.coordenadasEspecimen(especimen.codigoespecimen).longitud}"/>
                                </p:column>
                                <p:column 
                                    headerText="País"
                                    rendered="#{especimen.recoleccion.tiporecoleccion == 'I' or
                                                especimen.recoleccion.tiporecoleccion == 'i'}">
                                    <h:outputText 
                                        value="#{contenidoBean.recoleccionInternacional(especimen.codigoespecimen).pais}"/>
                                </p:column>
                                <p:column 
                                    headerText="Distrito"
                                    rendered="#{especimen.recoleccion.tiporecoleccion == 'I' or
                                                especimen.recoleccion.tiporecoleccion == 'i'}">
                                    <h:outputText 
                                        value="#{contenidoBean.recoleccionInternacional(especimen.codigoespecimen).distrito}"/>
                                </p:column>
                                <p:column 
                                    headerText="Ciudad"
                                    rendered="#{especimen.recoleccion.tiporecoleccion == 'I' or
                                                especimen.recoleccion.tiporecoleccion == 'i'}">
                                    <h:outputText 
                                        value="#{contenidoBean.recoleccionInternacional(especimen.codigoespecimen).ciudad}"/>
                                </p:column>
                                <p:column 
                                    headerText="Donante"
                                    rendered="#{especimen.recoleccion.tiporecoleccion == 'I' or
                                                especimen.recoleccion.tiporecoleccion == 'i'}">
                                    <h:outputText 
                                        value="#{contenidoBean.recoleccionInternacional(especimen.codigoespecimen).donante}"/>
                                </p:column>
                                <p:column headerText="Observaciones">
                                    <h:outputText 
                                        value="#{especimen.recoleccion.observaciones}"/>
                                </p:column>
                            </p:dataTable>
                        </p:overlayPanel>
                    </p:column>              
                </p:dataTable>
                <p:commandButton 
                    value="Cerrar" 
                    type="button" 
                    onclick="especimenAnimal.hide()"
                    icon="ui-icon-close" 
                    title="Cerrar ventana"
                    immediate="true"
                    style="float:right; font-size: 85%"/>
            </h:form>
        </p:dialog>
    </ui:define>
</ui:composition>

